<template>
  <div class="word-card">
    <p>{{ word.id }}</p>
    <h3>{{ word.word }} <span>[{{ word.phonetic }}]</span></h3>
    <p>{{ word.definition }}</p>
    <p>中文释义: {{ word.chineseDefinition }}</p>
    <button @click="toggleLearnedStatus">标记为{{ word.isLearned ? '未学习' : '已学习' }}</button>
    <button @click="speakWord">朗读</button>
    <button @click="$emit('fetch-word-details', word.id)">查询词典</button>
    <button @click="$emit('edit-word', word.id)">编辑</button>
  </div>
</template>

<script>
export default {
  props: ['word'],
  methods: {
    toggleLearnedStatus() {
      this.$store.commit('markAsLearned', this.word.id);
    },
    speakWord() {
      // 使用全局变量 responsiveVoice
      if (typeof responsiveVoice !== 'undefined') {
        responsiveVoice.speak(this.word.word, "US English Female");
      } else {
        console.error('ResponsiveVoice is not defined. Please check the script loading.');
      }
    }
  }
}
</script>

<style scoped>
.word-card {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
h3 {
  margin: 0;
}
p {
  margin: 5px 0;
}
button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
}
button:hover {
  background-color: #45a049;
}
</style>